{% extends "base-admin.html" %}
{% block title %}查询图书信息{% endblock %}

{% block card %}
<div class="layui-card-header"><h2>查询图书信息</h2></div>{% endblock %}
{% block body %}
<form class="layui-form" method="post" id="searchForm">
    {{ form.csrf_token }}
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                    {{ form.method(class="layui-input-inline") }}
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">查询内容：</label>
                    <div class="layui-input-inline">
                        {{ form.content(class="layui-input",style="width:250px") }}
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline">{{ form.submit(class="layui-btn", id="search") }}</div>

                </div>
            </div>
        </div>

    </div>
</form>
<div id="remove">
    <table lay-even id="result" lay-filter="re">
        <thead>
        <tr>
            <th lay-data="{field:'isbn', width:140}">ISBN</th>
            <th lay-data="{field:'book_name', width:200}">书名</th>
            <th lay-data="{field:'press', width:180}">出版社</th>
            <th lay-data="{field:'author', width:140}">作者</th>
            <th lay-data="{field:'class_name', width:200}">类别</th>
            <th lay-data="{field:'count', width:120}">馆藏数量</th>
            <th lay-data="{field:'available'}">可借数量</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<table id="test" lay-filter="test"></table>

{% endblock %}

{% block script %}
<script>
    layui.use(['form', 'table', 'jquery'], function () {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;

        table.init('re', {
            height: 390
            , limit: 7
            , page: true
        });

        $(document).ready(function () {
            $("#li_3").addClass("height-light");
            var form = new FormData(document.getElementById("searchForm"));
            $.ajax({
                url: "{{ url_for('find_book') }}",
                type: "post",
                data: form,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.length !== 0) {
                        $('#remove').remove();
                        table.render({
                            elem: '#test'
                            , data: data
                            , cols: [[
                                {field: 'isbn', title: 'ISBN', width: 140}
                                , {field: 'book_name', title: '书名', width: 200}
                                , {field: 'press', title: '出版社', width: 180}
                                , {field: 'author', title: '作者', width: 140}
                                , {field: 'class_name', title: '类别', width: 200}
                                , {field: 'count', title: '馆藏数量', width: 120}
                                , {field: 'available', title: '可借数量'}
                            ]]
                            , page: true
                            , height: 390
                            , limit: 7
                            , response: {
                                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                            }
                            , parseData: function (data) { //将原始数据解析成 table 组件所规定的数据
                                return {
                                    "code": data.status, //解析接口状态
                                    "msg": data.message, //解析提示文本
                                    "count": data.total, //解析数据长度
                                    "data": data.rows.item //解析数据列表
                                };
                            }
                        });
                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;

                            layer.msg('未找到任何结果', {time: 1000});
                        });
                    }
                }
            });
            $('#search').on('click', function () {
                var form = new FormData(document.getElementById("searchForm"));
                $.ajax({
                    url: "{{ url_for('find_book') }}",
                    type: "post",
                    data: form,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.length !== 0) {
                            $('#remove').remove();
                            table.render({
                                elem: '#test'
                                , data: data
                                , cols: [[
                                    {field: 'isbn', title: 'ISBN', width: 140}
                                    , {field: 'book_name', title: '书名', width: 200}
                                    , {field: 'press', title: '出版社', width: 180}
                                    , {field: 'author', title: '作者', width: 140}
                                    , {field: 'class_name', title: '类别', width: 200}
                                    , {field: 'count', title: '馆藏数量', width: 120}
                                    , {field: 'available', title: '可借数量'}
                                ]]
                                , page: true
                                , height: 390
                                , limit: 7
                                , response: {
                                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                                }
                                , parseData: function (data) { //将原始数据解析成 table 组件所规定的数据
                                    return {
                                        "code": data.status, //解析接口状态
                                        "msg": data.message, //解析提示文本
                                        "count": data.total, //解析数据长度
                                        "data": data.rows.item //解析数据列表
                                    };
                                }
                            });
                        } else {
                            layui.use('layer', function () {
                                var layer = layui.layer;

                                layer.msg('未找到任何结果', {time: 1000});
                            });
                        }
                    }
                });
                return false;
            })
            return false;
        });

    });
</script>
{% endblock %}

